<template>
	<view>
		<view class="page-body">
		    <view class="page-section page-section-gap">
		        <map class="mapcontent" :circles="circles" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" @callouttap="coverstap($event)" @regionchange="mapregionchange">
				<!-- 显示层start -->
				<cover-view class="MapShopDetail" @click="MapShopDetailClick">
					<cover-view class="uni-media-list-logo">
						<cover-image :src="MapShopImg"></cover-image>
					</cover-view>
					<cover-view class="uni-media-list-body">
						<cover-view class="uni-media-list-text-top uni-ellipsis">{{MapTitle}}</cover-view>
						<!-- 第二，三,四行start -->
						<cover-view class="uni-media-list-text-bottom uni-ellipsis listline"><cover-image :src="MapDistanceicon"></cover-image><cover-view class="ml16">{{MapDistance}}</cover-view></cover-view>
						<cover-view class="uni-media-list-text-bottom uni-ellipsis listline"><cover-image :src="MapPrivateRoomicon"></cover-image><cover-view class="ml16">{{MapPrivateRoom}}</cover-view></cover-view>
						<cover-view class="uni-media-list-text-bottom uni-ellipsis listline"><cover-image :src="Mapconsumptionicon"></cover-image><cover-view class="ml16">{{Mapconsumption}}</cover-view></cover-view>
						<cover-view class="uni-media-list-text-bottom uni-ellipsis listline"><cover-image :src="Mapvipicon"></cover-image><cover-view class="ml16">{{Mapvip}}</cover-view></cover-view>
						<!-- 第三,四行end -->
					</cover-view>
				</cover-view>
				<!-- 显示层end -->
				
				</map>
		    </view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				//点击店铺展示详细start
				MapTitle: "达美乐比萨（北石路店）点此到店点餐",
				MapRateSize:'12',
				MapDistance:'1.5km',
				MapDistanceicon:"/static/icon/homepage/MapDistanceicon.png",
				MapShopImg: "/static/img/homepage/s1.jpg",
				MapPrivateRoomicon:"/static/icon/homepage/shoplistroom.png",
				MapPrivateRoom:"有包房",
				Mapconsumptionicon:"/static/icon/homepage/shoplistmoney.png",
				Mapconsumption:"99￥/人",
				Mapvipicon:"/static/icon/homepage/shoplistvip.png",
				Mapvip:"支持会员卡",
				
				//点击店铺展示详细end
				title: 'map',
				latitude: 31.23037,
				longitude: 121.4737,
				//周边店铺信息
				covers: [{
				    latitude: 31.23037,
				    longitude: 121.4737,
					width:30,
					height:30,
				    iconPath: '/static/icon/homepage/ShopLocation.png',
					callout:{
					        content:'店铺名',
					        color:'#F76350',
					        fontSize:12,
							padding:6,
							borderRadius:4,
					}
				}],
				//地图层级
				scale:15,
				//在地图上显示圆
				circles:[{
					latitude: 31.23037,
					longitude: 121.4737,
					//填充颜色
					fillColor:"#00000087",
					//描边的颜色
					color:"#f94f47",
					//半径
					radius:500,
					//描边的宽度
					strokeWidth:.5
				}],
			};
		},
		onLoad(){
			// 获取当前的位置坐标
			uni.getLocation({
				type: 'wgs84',
				success: (data)=> {
					//定位当前位置，当前环形位置，店铺位置
					this.longitude=this.circles[0].longitude=this.covers[0].longitude=data.longitude;
					this.latitude=this.circles[0].latitude=this.covers[0].latitude=data.latitude;
					//店铺名
					// this.covers[0].callout.content="测试店铺";
					//增加周边店铺covers[]
					this.covers.push({
					    latitude: 31.23032,
					    longitude: 121.473691,
						width:30,
						height:30,
					    iconPath: '/static/icon/homepage/ShopLocation.png',
						callout:{
						        content:'店铺1',
						        color:'#F76350',
						        fontSize:12,
								padding:6,
								borderRadius:4,
						}
					});
					
				}
			});
		},
		methods:{
			//店铺标记点
			coverstap(e){
				console.log('点击了店铺标记点'+e)
			},
			//店铺详情
			MapShopDetailClick(){
				uni.navigateTo({
					url:'shopdetail'
				})
			},
			//视野发生变化
			mapregionchange(){
				console.log('视野变化了')
			}
		}
	}
</script>


<style lang="less" scoped>
	@import url("../../common/uni.css");
	.ml16{
		margin-left: 16px;
	}
	.mapcontent{
		width: 750upx;
		height: 100vh;
		//店铺列表
		.MapShopDetail{
				background-color: #fff;
				width: 90%;
				border-radius: 5px;
				padding: 8px;
				position: absolute;
				left: 2.5%;
				/* #ifdef MP-WEIXIN */
				bottom: 5px;
				/* #endif */
				/* #ifdef H5 */
				bottom: 57px;
				/* #endif */
			//内部body
			.uni-media-list-body{
				height: auto;
			.uni-media-list-text-top{
				padding-top: 5px;
				font-size: 16px;
				font-weight: bold;
			}
			}
			//左侧图片
			.uni-media-list-logo{
				width: 125px;
				height: 85px;
				float: left;
			}
			//第三四五行
			.listline{
				margin-top: 6px;
				cover-image{
					width: 15px;
					height: 13px;
					float: left;
				}
			}
		}
		
		
		
	}
</style>
